import { FC, useState } from "react"
import { connect } from "react-redux"
import { useTranslation } from 'react-i18next'
import TableNft from "./components/tableNft"
import TableGameFi from "./components/tableGameFi"
import "./index.scss"

interface IMarket {}

const Market: FC<IMarket> = () => {

	const { t } = useTranslation()
	const [ tab, setTab ] = useState(0)

	return (
		<div id="market">
			<div className='market-container'>
				<div className="market-header flex-between">
					<div className="market-title">
						mar
						<span className="market-k">k</span>
						et
					</div>
					<div className="market-table">
							<div onClick={() => setTab(0)} className={`${tab === 0 ? 'active' : ''} flex-center`}>{t('market.nft')}</div>
							<div onClick={() => setTab(1)} className={`${tab === 1 ? 'active' : ''} flex-center`}>{t('market.gameFi')}</div>
					</div>
				</div>
				{
					tab === 0 ? <TableNft /> : <TableGameFi />
				}
			</div>
		</div>
	)
}

const mapStoreToProps = () => {
	return {}
}

const mapDispatchToProps = () => {
	return {}
}

export default connect(mapStoreToProps, mapDispatchToProps)(Market)